<template>
    <div id="addCard" class="desclass">
        <header class="header">
            <router-link v-if="returnpath==''" to='/mine/editCard?type=3' class="addTrend">
                <i class="el-icon-arrow-left"></i>
            </router-link>
            <a @click="returnFrom" v-else class="addTrend"><i class="el-icon-arrow-left"></i></a>
            编辑名帖
        </header>
        <form id="form-card-add" name="form-card-add">
            <div class="croppa">
                <croppa 
                @image-remove="imgRemove"
                @new-image-drawn="getDefaultBlob"
                v-model="myCroppa"
                :width="120"
                :height="120"
                :placeholder="'点击这里上传头像'"
                :canvas-color="'#ffffff'"
                :placeholder-font-size="13" id="picCroppa" class="myCroppa">
                    <img crossOrigin="anonymous" :src="baseUrl.baseUrl+imgArr.cplogo" slot="initial">
                </croppa>
                <div class="bnt-list">
                    <el-button :type="logotype" @click="setlogo" size="mini" v-if="urlpic">{{mess}}</el-button>
                    <!-- <el-button type="info" @click="rotatepic" size="mini" v-if="urlpic">旋转</el-button> -->
                    <el-button type="success" @click="uploadCroppedImageC" size="mini" v-if="urlpic">确认裁剪</el-button>
                </div>
            </div>
            <div class="backpic">
                <input @change="uploadCroppedImageB" name="companylogo" id="cclogo" type="file" accpet="image/*"/>
                <img v-if="srcurl" :src="srcurl" style="width:80%;">
                <img v-else-if="imgArr.cclogo" :src="baseUrl.baseUrl+imgArr.cclogo" style="width:80%;">
                <p>点击这里上传背景图</p>
            </div>
            <div class="myInfo-main baseinfo">
                <p class="info-one userid">
                    <span class="redinput"></span><span class="left-bq">用户名</span>
                    <label class="center-info" id="userid">{{username}}</label>
                </p>
                <p class="info-one userName">
                    <span class="redinput">*</span><span class="left-bq">名帖名称</span>
                    <label class="center-info"><input name="cname" id="cname" type="text"  value="" v-model="formtext.cname"/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one type" @click="changeCardtype">
                    <span class="redinput">*</span><span class="left-bq">名帖类型</span>
                    <label class="center-info" id="itype" v-if="typeval">{{typeval}}</label>
                    <label class="center-info" id="itype" v-else-if="this.$store.state.itype==1">{{typearr[0].typeval}}</label>
                    <label class="center-info" id="itype" v-else>{{typearr[1].typeval}}</label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one" v-for="(item,index) in telArr" :key="index" >
                    <span class="redinput"></span><span class="left-bq">联系电话</span>
                    <label style="width:58%;" class="center-info"><input name="clogtel" id="clogtel" type="text"  value="" placeholder="必填" v-model="item['tel']"/></label>
                    <i @click="delInput(item)" style="line-height:3rem;margin-right:0.5rem;" class="el-icon-remove-outline"></i>
                    <i @click="addInput" style="line-height:3rem;" class="el-icon-circle-plus-outline"></i>
                </p>
                <p class="info-one" id="address-p" @click="positionShow">
                    <span class="redinput"></span><span class="left-bq">联系地址</span>
                    <label class="center-info address" id="address">{{this.$store.state.address}}</label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one" id="map-p" @click="searchPageIsShow">
                    <span class="redinput"></span><span class="left-bq">定位</span>
                    <label class="center-info"><span v-if="this.$store.state.lat">lat:</span>{{this.$store.state.lat}}&nbsp;&nbsp;&nbsp;&nbsp;<span v-if="this.$store.state.lng">lng:</span>{{this.$store.state.lng}}</label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one" id="ctags-p" @click="tipsShow">
                    <span class="redinput"></span><span class="left-bq">标签</span>
                    <label class="center-info" id="ctags"><span v-for="(item,index) in this.$store.state.tip" :key="index">{{item}}&nbsp;&nbsp;</span></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one" id="iindustryid-p" @click="industryShow"> 
                    <span class="redinput"></span><span class="left-bq">行业</span>
                    <label class="center-info" id="cindustry">{{this.$store.state.industry}}</label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">邮箱</span>
                    <label class="center-info"><input name="cemail" id="cemail" type="text" v-model="formtext.cemail"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one" v-if="this.$store.state.itype==1">
                    <span class="redinput"></span><span class="left-bq">微信号</span>
                    <label class="center-info"><input v-model="formtext.cwx" name="cwx" id="cwx" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
            </div>

            <!--公司类型名帖信息-->
            <div class="myInfo-main personalinfo" v-if="this.$store.state.itype==1">
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">所属公司</span>
                    <label class="center-info"><input v-model="formtext.ccompany" name="ccompany" id="ccompany" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">部门</span>
                    <label class="center-info"><input v-model="formtext.cdepartment" name="cdepartment" id="cdepartment" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">职位</span>
                    <label class="center-info"><input v-model="formtext.cpost" name="cpost" id="cpost" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
            </div>
            <div class="myInfo-main companyinfo" v-if="this.$store.state.itype==0">
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">公司</span>
                    <label class="center-info"><input v-model="formtext.ccompany" name="ccompany" id="ccompany" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">网址</span>
                    <label class="center-info"><input v-model="formtext.ccurl" name="ccurl" id="ccurl" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
                <p class="info-one">
                    <span class="redinput"></span><span class="left-bq">微信公众号</span>
                    <label class="center-info"><input v-model="formtext.cwx" name="cwx" id="cwx" type="text"  value=""/></label>
                    <i class="iconfont icon-you"></i>
                </p>
            </div>
            <p class="info-one userInfo">
                <span class="redinput"> </span><span class="left-bq">简介</span>
                <label class="center-info">
                </label>
                <i class="iconfont icon-you"></i>
            </p>
            <div class="quill-editor-example">
                <vue-editor placeholder="写点什么吧..." :editorToolbar="customToolbar" v-model="formtext.cdesc"></vue-editor>
            </div>
        
            
        </form> 
        <transition name="cardtypename">
            <div class="cardtype" v-show="cardtype">
                <div class="cardtypechild">
                    <p v-for="(item,index) in typearr" :key="index" class="hasbottom" @click="checkType(item.typeval,item.typevalint)">{{item.typeval}}</p>
                    <p @click="changeCardtype">取消</p>
                </div>
            </div>
        </transition>
        <!-- 底部 -->
        <div id="foot">
            <a @click="tosave" href="javascript:void(0)" class="edit-card-button add-card-submit">保存</a>
        </div>
    </div>
</template>

<script>
import remoteLoad from '../../../js/remoteLoad.js'
import {addCard,getCardById} from '../../../js/dataServe.js'
import {baseUrl} from '../../../config/env'
import { VueEditor } from 'vue2-editor'
export default {
    data(){
        let self = this;
        return {
            returnpath:sessionStorage.returnpath,
            returnval:true,
            telArr:[{tel:''}],
            cardid:'',
            mess:'设置为二维码logo',
            logotype:'info',
            imgArr:{
                cclogo:'',
                cplogo:''
            },//储存返回的图片
            username:decodeURIComponent(sessionStorage.username),
            baseUrl:{baseUrl},
            myCroppa:{},
            myCroppas:{},
            bntbg:false,
            bntpic:false,
            cardtype:false,
            typearr:[{
                'typeval':'个人',
                'typevalint':1
            },{
                'typeval':'公司',
                'typevalint':0
            }],
            typeval:'',
            formtext:{
                id:"",
                bcodeflag:false,
                cemail:"",
                cdesc:"",
                cname:"",
                clogtel:"",
                ccompany:"",
                cdepartment:"",
                cpost:"",
                ccurl:"",
                cwx:"",
                itype:""
            },
            srcurl:"",
            customToolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'align': [] }]
            ]
        }   
    },
    components:{
        // quillEditor
        VueEditor
    },
    async mounted () {
        let self = this;
        if (window.AMap){
            this.initMap();
        }else{
            await remoteLoad(`http://webapi.amap.com/maps?v=1.4.2&key=b02674c30e6ee45bdfb3c21d9c0b9c69`);
            // console.log(window.AMap)
            this.initMap();
        }
        this.cardid = this.$route.query.cardid;
        this.getCardInfoById(this.cardid)
    },
    activated () {
        // console.log(this.$route.meta.isActive)
        if(this.$route.meta.isActive){
            this.returnval = true
            this.myCroppa.refresh()
            this.srcurl = ''
            this.cardid = this.$route.query.cardid;
            this.getCardInfoById(this.cardid)
        }
    },
    // activated(){
    // },
    methods: {
        returnFrom(){
            this.$router.push({path:this.returnpath})
            sessionStorage.returnpath = ''
        },
        addInput(){
            if(this.telArr.length<5){
                this.telArr.push({tel:''})
            }else{
                alert('最多填5个')
            }
        },
        delInput(item){
            if(this.telArr.length>1){
                let index = this.telArr.indexOf(item);
                // console.log(index)
                if (index > -1) {
                    this.telArr.splice(index, 1);
                    console.log(this.telArr)
                }
            }else{
                alert('请至少填一个');
            }
        },
        initMap () {
            let mapObj = new AMap.Map('');
            mapObj.plugin('AMap.Geolocation', function () {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 10,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                mapObj.addControl(geolocation);
                geolocation.getCityInfo(function(stutas,result){
                    sessionStorage.setItem('cityname',result.city)
                    sessionStorage.setItem('citycode',result.citycode)
                });
            });

        },
        imgRemove(){
            // console.log(666)
            this.formtext.personlogo = ""
        },
        //默认blob
        getDefaultBlob(){
            let self = this
            let urlc = self.myCroppa.generateBlob( blob => {
                    self.formtext.personlogo = blob
                },
                'image/jpeg',
                0.8)
            // console.log(self.formtext.personlogo)
        },
        uploadCroppedImageC() {
            let urlc = this.myCroppa.generateBlob( blob => {
                this.formtext.personlogo = blob
            },
            'image/jpeg',
            0.8)
            self.$message({
                            duration: 2000,
                            message: '裁剪成功',
                            type: 'success'
                        })

        },
        uploadCroppedImageB(event) {

            let file = event.target.files[0];
            this.formtext.companylogo = file;
            // console.log(this.formtext.companylogo)

            let self = this;
            let reader = new FileReader();

            reader.onloadend = function () {
                // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
                let dataURL = reader.result;
                self.srcurl = dataURL
                // console.log(dataURL)
            };
            reader.readAsDataURL(file); // 读出 base64
            // console.log(this.srcurl)
        },
        rotatepic(){
            this.myCroppa.rotate({step:1});
        },
        rotatebg(){
            this.myCroppas.rotate({step:1});
        },
        searchPageIsShow(){
            let self = this;
            self.$router.push({path:"/mine/searchPosition",query:{cardid:self.cardid}})
        },
        positionShow(){
            let self = this;
            this.$router.push({path:"/mine/position",query:{cardid:self.cardid}})
        },
        tipsShow(){
            let self = this;
            self.$router.push({path:"/mine/tips",query:{cardid:self.cardid}})
        },
        industryShow(){
            let self = this;
            this.$router.push({path:"/mine/industry",query:{cardid:self.cardid}})
        },
        changeCardtype(){
            this.cardtype = !this.cardtype
        },
        checkType(typeval,typevalint){
            this.typeval = typeval;
            this.cardtype = !this.cardtype;
            this.$store.commit('changeItype',{val:typevalint});
        },
        isEmail(val){
          var myreg = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
 
          return !myreg.test(val);
        },
        //是否设为二维码logo
        setlogo(){
            if(!this.formtext.bcodeflag){
                this.formtext.bcodeflag = true
                this.logotype = 'success'
                this.mess = "点击取消logo设置"
            }else{
                this.formtext.bcodeflag = false
                this.logotype = 'info'
                this.mess = "设置为二维码logo"
            }
            
        },
        //保存
        tosave(){
            this.formtext.id = this.cardid;
            this.formtext.cprovince = this.$store.state.province?this.$store.state.province:"";
            this.formtext.ccity = this.$store.state.city?this.$store.state.city:"";
            this.formtext.cdistrict = this.$store.state.town?this.$store.state.town:"";
            this.formtext.caddress = this.$store.state.detail?this.$store.state.detail:"";
            this.formtext.ilatitude = this.$store.state.lat?this.$store.state.lat:"";
            this.formtext.ilongitude = this.$store.state.lng?this.$store.state.lng:"";
            this.formtext.ctechtags = this.$store.state.tip.length?this.$store.state.tip:[];
            this.formtext.ctags = this.$store.state.tipid?this.$store.state.tipid.length:[];
            this.formtext.cindustry = this.$store.state.industry?this.$store.state.industry:"";
            this.formtext.iindustryid = this.$store.state.industryid?this.$store.state.industryid:"";
            this.formtext.itype = this.$store.state.itype?this.$store.state.itype:"";

            let formtext = this.formtext;
            let self = this;
            if(!self.formtext.cname.length){
                alert('名帖名称不能为空！')
                return false;
            }
            self.formtext.clogtel = ''
            console.log(this.telArr);
            this.telArr.forEach((v,k)=>{
                self.formtext.clogtel += v.tel+','
                if(!v.tel.length){
                    alert('第'+(k+1)+'个电话不能为空！')
                    this.returnval = false
                }else if(!new RegExp("^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$").test(v.tel) && !new RegExp("^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$").test(v.tel)){
                    alert('第'+(k+1)+'个请输入正确的手机号或座机号！') 
                    this.returnval = false
                }else{
                    this.returnval = true
                }
            })
            if(!this.returnval){
                return false
            }
            if(self.formtext.cemail!=''){
                let rEmail = !new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$").test(self.formtext.cemail)
                if(rEmail){
                    alert('请输入正确的邮箱')
                    return false;
                }
            }

            let formdata = new FormData();

            Object.keys(formtext).forEach(key => {
                            formdata.append(key,formtext[key])
                        })
    

            let responseData = addCard(formdata);
            responseData.then((res)=>{
                                        // alert(decodeURIComponent(res.msg))
                                        if(res.result == 1){
                                            
                                            if(self.returnpath == ''){
                                                self.$router.push({path:'/mine/editCard',query:{type:3}})
                                            }else{
                                                self.$router.push({path:self.returnpath})
                                            }
                                      
                                            self.$message({
                                                duration: 2000,
                                                message: '修改成功',
                                                type: 'success'
                                            })
                                            this.$store.commit('changeAllCards',{val:[]});
                                        }else{
                                            self.$message({
                                                duration: 2000,
                                                message: res.msg,
                                                type: 'error'
                                            })
                                        }
                                    })
        },
        //根据id获取名帖信息
        getCardInfoById(id){
            if(sessionStorage.sid){
                let self = this;
                let responseData = getCardById(id);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                setTimeout(function(){
                                                    if(!res.data.cplogo){
                                                        self.formtext.personlogo = ""//清空blob
                                                        self.myCroppa.remove()
                                                    }else{
                                                        let urlc = self.myCroppa.generateBlob(blob => {
                                                                        self.formtext.personlogo = blob
                                                                    },
                                                                    'image/jpeg',
                                                                    0.8)
                                                    }
                                                },1000)
                                                self.$store.commit('emptyTip')
                                                self.imgArr.cclogo = res.data.cclogo;
                                                self.imgArr.cplogo = res.data.cplogo;
                                                self.formtext.cemail = res.data.cemail;
                                                self.formtext.cname = res.data.cname;
                                                self.formtext.cdesc = res.data.cdesc;
                                                self.formtext.clogtel = res.data.clogtel;
                                                self.telArr = [];
                                                setTimeout(function(){
                                                    res.data.clogtel.split(',').forEach((v,k)=>{
                                                        if(v){
                                                            self.telArr.push({tel:v})
                                                        }
                                                        
                                                    })
                                                },0)
                                                self.formtext.cpost = res.data.cpost;
                                                self.formtext.cwx = res.data.cwx;
                                                self.formtext.ccurl = res.data.ccurl; 
                                                self.formtext.cdepartment = res.data.cdepartment;
                                                self.formtext.ccompany = res.data.ccompany;
                                                self.$store.commit('changeItype',{val:res.data.itype});
                                                self.$store.commit('changeLat',{val:res.data.ilatitude});
                                                self.$store.commit('changeLng',{val:res.data.ilongitude});
                                                let tipArr = res.data.ctechtags.split(',')
                                                tipArr.shift()
                                                let tipidArr = res.data.ctags.split(',')
                                                tipidArr.shift()
                                                self.$store.commit('reTip',{val:tipArr,id:tipidArr});
                                                self.$store.commit('changeIndustry',{val:res.data.cindustry,id:res.data.iindustryid});
                                                self.$store.commit('changeProvince',{val:res.data.cprovince});
                                                self.$store.commit('changeCity',{val:res.data.ccity});
                                                self.$store.commit('changeTown',{val:res.data.cdistrict});
                                                self.$store.commit('changeDetail',{val:res.data.caddress});
                                                self.$store.commit('changeAddress');
                                                // console.log(self.$store.state.tip)
                                            }
                                        })
            }
        }
    },
    computed:{
        urlpic:function(){
            if(this.myCroppa.generateDataUrl){
                return Boolean(this.myCroppa.generateDataUrl())
            }
        }
    },
    beforeRouteEnter(to,from,next){
        if(from.name == 'editCard'){
            to.meta.isActive = true;
        }else{
            console.log(from)
            if(from.name=='tre' || from.name == 'art' || from.name=='blog' || from.name=='product'){
                sessionStorage.setItem('returnpath',from.fullPath)
            }   
        }
        next();
    },
    beforeRouteLeave(to,from,next){
        from.meta.isActive = false;
        next();
    }
}
</script>

<style scoped >
.iconfont{
    position:absolute;
    top:0;
    right:0.5rem;
}
#addCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
}
#addCard .info-one{
    height:3rem;
    line-height:3rem;
}
.desclass{
    min-height:100%;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
.header i{ color: #333;}
.change-bg{
    height: 3rem;
    line-height: 3rem;
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 0 1rem;
    box-sizing: border-box;
    background:#ffffff;
    margin:2rem 0 ;
}
.change-bg input{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#form-card-add{
    background:#EBEEF5;
    padding: 3rem 0 4rem 0;
}
.info-one{
    width: 100%;
    height: 3rem;
    display: flex;
    padding: 0 1rem;
    position:relative;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #EBEEF5;
}
.info-one label{
    text-align:left;
}
.info-one .left-bq{
    width:30%;
    text-align:left;
}
.redinput{
    position: absolute;
    left: 0.5rem;
}
.center-info{
    width: 70%;
}
.center-info input{
    width: 100%;
    height: 100%;
    border: none;
    box-sizing: border-box;
    outline: none;
    display:block;
}
.myCroppa{
    background:#ffffff;
    margin-top:23px;
}
.croppa{
    width:100%;
    border-bottom: 1px solid #EBEEF5;
    box-sizing:border-box;
    background:#ffffff;
}
#searchText {
    width: 100%;
    height: 2.5rem;
    border: 1px solid #e4e4e4;
    padding-left:1rem;
    box-sizing:border-box;
    font-size:1rem;
}
.searchPosition{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #ffffff;
}
#head{
    background:#2790A6;
    font-size:1.2rem;
    color:#ffffff;
}
.parentSearch{
    margin-top:1rem;
    padding:0 1rem;
}
.info-one{
    position:relative;
}
#chooseaddress{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    opacity:0;
}
.address{
    text-align:left;
}
.cardtype{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5)
}
.cardtypechild{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    width:50%;
    height:9rem;
    background: #ffffff;
    border-radius: 1rem;
}
.cardtypechild p{
    box-sizing:border-box;
    height:3rem;
    line-height:3rem;
}
.hasbottom{
    border-bottom:1px solid #EBEEF5;
}
#foot {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: #333333;
    height:3rem;
    width:100%;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    z-index: 2000;
}
.edit-card-button{
    display: block;
    width: 100%;
    height: 3rem;
    background: #00AA76;
    text-align: center;
    font-size: 1.3rem;
    color: #fff;
    line-height: 3rem;
    position: fixed;
    bottom: 0px;
    z-index: 9999999;
}
.backpic{
    position:relative;
    background:#ffffff;
    border-bottom:1px solid #EBEEF5;
    box-sizing:border-bottom;
}
.backpic input{
    position: absolute;
    left:0;width:100%;
    height:100%; 
    opacity: 0;
    
}
.backpic p{
    font-size:1rem;
    height: 3rem;
    line-height:3rem;
}
header a{
    position: absolute;
    left: 1rem;
    color: #ffffff;
    width: 2rem;
}
.quill-editor-example{
    margin-top:1rem;
    background: #ffffff;
    text-align:left;
}
.quill-editor{
    height:20rem;
}
</style>
